<template>
	<div class="edit-h5">
		<u-navbar placeholder :title="TUITranslateService.t(`TUIGroup.群公告`)" :rightIcon="isAuthor?notificationEdit:''"
			@rightClick="editNotification" autoBack>
		</u-navbar>
		<div class="edit-h5-main">
			<u-swipe-action v-if="groupProfile.notification">
				<u-swipe-action-item :options="isAuthor?options:[]" @click="selectClick">
					<div class="swipe-action">
						<div class="notification-cont">{{ notification.notificationText}}</div>
						<div class="info">{{notification.notificationOpt.name}}
							<span>{{notification.notificationOpt.date}}</span></div>
					</div>
				</u-swipe-action-item>
			</u-swipe-action>
			<div class="empty" v-if="!groupProfile.notification">
				<u-empty :icon="empty" text="暂无群公告"></u-empty>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { nextTick, reactive } from "../../../adapter-vue";
	import {
		TUITranslateService,
		IGroupModel,
		TUIStore,
		StoreName,
		TUIGroupService
	} from "@tencentcloud/chat-uikit-engine";
	import { TUIGlobal, outsideClick } from "@tencentcloud/universal-api";
	import { watchEffect, ref } from "../../../adapter-vue";
	import { Toast, TOAST_TYPE } from "../../common/Toast/index";
	import { isUniFrameWork } from "../../../utils/env";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import empty from "../../../assets/icon/empty.png";
	import notificationEdit from "../../../assets/icon/notification-edit.png";
	import { checkUserInfo } from "../../../utils/checkLogin";
	const groupID = ref<any>('')
	const isAuthor = ref(false)
	const options = reactive([{
		text: '删除',
		style: {
			backgroundColor: '#ff0012'
		}
	}])

	const groupProfile = ref<any>({});
	const notification = ref<any>({
		notificationText: '',
		notificationOpt: {
			date: '',
			name: ''
		}
	});
	const input = ref("");
	const isEdit = ref(false);
	const editNotification = () => {
		TUIGlobal?.navigateTo({
			url: "/pages/TUIKit/components/TUIGroup/manage-group/manage-notification-add?groupID=" + groupID.value
		});

	}
	//删除
	const selectClick = (e) => {
		if (e.index === 0) {
			TUIGroupService.updateGroupProfile({
				groupID: groupID.value,
				notification: ''
			}).then(res => {
				groupProfile.value.notification = ''
			})
		}

	}
	onLoad((options : any) => {
		groupID.value = options.groupID
		isAuthor.value = options.isAuthor === 'true'
	})
	onShow(() => {
		TUIStore.watch(StoreName.CUSTOM, {
			IMuserInfo: (data : any) => {
				if (data) {
					checkUserInfo()
					TUIGroupService.getGroupProfile({
						groupID: groupID.value,
					}).then((res) => {
						groupProfile.value = res.data.group
						if (!!res.data.group.notification) {
							let notificationInfo = res.data.group.notification.split('&notificationOpt=')
							notification.value = {
								notificationText: notificationInfo[0],
								notificationOpt: JSON.parse(notificationInfo[1])
							}
						}

					}).catch((error) => {
						console.log(error, "异常")
					})
				}

			}
		})
	})


	// 更新群资料
	// const updateProfile = () => {
	// 	if (input.value.length > 150) {
	// 		Toast({
	// 			message: TUITranslateService.t("TUIGroup.群公告字数超出限制，最大长度为150"),
	// 			type: TOAST_TYPE.ERROR,
	// 		});
	// 		return;
	// 	}
	// 	if (input.value && input.value !== groupProfile.value.notification) {
	// 		emits("update", { key: "notification", value: input.value });
	// 		nextTick(() => {
	// 			input.value = "";
	// 		});
	// 	}
	// 	isEdit.value = !isEdit.value;
	// };
</script>

<style lang="scss" scoped>
	@import url("../../../assets/styles/common.scss");

	.notification {
		flex: 1;
		padding: 20px;
		display: flex;
		flex-direction: column;
		word-break: break-all;

		.row {
			flex: 1;
			font-size: 14px;

			.row-p {
				text-align: center;
				padding-bottom: 20px;
			}
		}

		.textarea {
			margin-bottom: 20px;
			box-sizing: border-box;
			padding: 10px;
			border: 1px solid #e8e8e9;
			resize: none;
			font-size: 14px;
			height: 100%;
		}

		.uni-height {
			height: 20vh;
		}

		.footer {
			display: flex;
			justify-content: flex-end;
			padding: 20px 10px;
		}
	}

	.btn {
		background: #3370ff;
		border: 0 solid #2f80ed;
		padding: 4px 28px;
		font-weight: 400;
		font-size: 12px;
		color: #ffffff;
		line-height: 24px;
		border-radius: 4px;

		&-cancel {
			background: #ffffff;
			border: 1px solid #dddddd;
			color: #828282;
		}
	}

	.edit-h5 {
		width: 100%;
		height: 100%;

		.edit-h5-main {
			flex: 1;
			padding: 18px;
			border-radius: 12px 12px 0 0;

		}

		&-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.close {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 26rpx;
				color: #999;
				letter-spacing: 0;
				line-height: 27px;
			}
		}

		&-footer {
			display: flex;

			.btn {
				flex: 1;
				border: none;
				background: #147aff;
				border-radius: 5px;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 16px;
				color: #ffffff;
				letter-spacing: 0;
				line-height: 27px;
				padding: 8px 0;

				&:disabled {
					opacity: 0.3;
				}
			}
		}
	}

	::v-deep .u-swipe-action-item__content {
		border-radius: 16rpx 0 0 16rpx;
	}

	::v-deep .u-swipe-action-item__right__button__wrapper {
		border-radius: 0 16rpx 16rpx 0 !important;
	}

	.swipe-action {
		width: 678rpx;
		// height: 213rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.notification-cont {
		word-break: break-all;
		display: -webkit-box !important;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical !important;
		height: 110rpx;
		margin-bottom: 20rpx;
	}

	.info {
		color: #999;
		display: flex;
		justify-content: space-between;
	}
</style>